<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>SSDS Tasklist Demo</title>
    <link href="css/index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1>SSDS Tasklist Demo</h1>

    <div id="details">
      <p class="version">version 1.0 (2008-06-23)</p>
      <p>by <a href="http://amundsen.com/blog/" title="Mike Amundsen">Mike Amundsen</a></p>
    </div>

    <div id="list-view" style="display:none;">
      <h2>Tasks</h2>
      <p class="buttons">
        <input type="button" id="refresh-list" value="Refresh" />
        <input type="button" id="add-new" value="Add" />
      </p>
      <fieldset>
        <ol id="task-list" />
      </fieldset>
    </div>

    <div id="add-view" style="display:none;">
      <h2>Add New Task</h2>
      <p class="buttons">
        <input type="button" id="add-save" value="Submit" />
        <input type="button" id="add-cancel" value="Cancel" />
      </p>
      <fieldset>
        <p class="inputs">
          <label for="add-id">Id</label>
          <input type="text" id="add-id" value="" size="5" />
        </p>
        <p class="inputs">
          <label for="add-name">Name</label>
          <input type="text" id="add-name" value="" size="30" />
        </p>
        <p class="inputs">
          <label for="add-completed">Completed</label>
          <select id="add-completed">
            <option value="false">No</option>
            <option value="true">Yes</option>
          </select>
        </p>
      </fieldset>
    </div>

    <div id="edit-view" style="display:none;">
      <h2>Edit Existing Task</h2>
      <p class="buttons">
        <input type="button" id="edit-save" value="Update" />
        <input type="button" id="edit-delete" value="Delete" />
        <input type="button" id="edit-cancel" value="Cancel" />
      </p>
      <fieldset>
        <p class="inputs">
          <label for="edit-id">Id</label>
          <input type="text" id="edit-id" value="" size="5" disabled="disabled"/>
        </p>
        <p class="inputs">
          <label for="edit-name">Name</label>
          <input type="text" id="edit-name" value="" size="30" />
        </p>
        <p class="inputs">
          <label for="edit-completed">Completed</label>
          <select id="edit-completed">
            <option value="false">No</option>
            <option value="true">Yes</option>
          </select>
        </p>
      </fieldset>
    </div>

    <div id="loading" style="display:none;">
      <h2>loading...</h2>
      <img src="images/loading.gif" alt="working..."/>
    </div>

  </body>
  <script type="text/javascript" src="scripts/ajax.js"></script>
  <script type="text/javascript" src="scripts/mozxpath.js"></script>
  <script type="text/javascript" src="scripts/index.js"></script>
</html>
